<template>
	<view class="container">
		<!-- <WarnInfo :image="warnIcon" :title="warnTitle"></WarnInfo> -->
		<view class="common_container">
			<view class="img">
				<image :src="warnIcon" class="icon" mode=""></image>
			</view>
			
			<view>{{warnTitle}}</view>
			
		</view>
		<view class="employ_part">
			<view class="left">
				<view class="name">
					{{employInfo.title}}
				</view>
				<view class="distance_address">
					{{employInfo.city}} &nbsp;&nbsp;{{employInfo.address}}
				</view>
				<view class="types">
					<view class="type_item" v-for="(type,i) in employInfo.positionLabel" :key="i">
						{{type}}
					</view>
				</view>
			</view>
			<view class="right">
				<view class="distance_address">
					{{employInfo.publishType}}
				</view>
				<view class="money">
					￥{{employInfo.salary}}
				</view>

			</view>
		</view>
		<blank></blank>
		<view class="mid_part">
			<view class="group_person">
				<image src="../../static/img/avartor.png" mode=""></image>
				<image src="../../static/img/noneImg.png" mode=""></image>
			</view>
			<view class="mini_desc">
				还差{{employInfo.difference}}人，快去邀请好友吧
			</view>
			<view class="extra_time" v-if="seconds> 0">
				剩余
				<view class="time">
					<view class="">
						{{hours}}
					</view>:
					<view class="">
						{{minutes}}
					</view>:
					<view class="">
						{{seconds}}
					</view>
				</view>
				结束
			</view>
			<view class="extra_time" v-else>
				已结束
			</view>
			<view class="buy_part">
				<view class="buy_list" v-for="(item,index) in employInfo.groupData" :key="index">
					<view class="img_part" v-if="item">
						<image :src="item.avatar ||'../../static/img/default.png'" class="default" mode=""></image>
						<view class="name" v-if="item.name">
					       {{item.name || ''}}
						</view>
					
					</view>
					<view class="time" v-if="item">
					{{item.groupTime}}
					</view>
				</view>
			</view>
			<Blank></Blank>
		<view class="go_rob" @click="shareBtn">邀请好友拼单</view>
		</view>
		<uni-popup ref="popups" type="bottom">
			<view class="pop">
				<view class="">
					<image src="../../static/img/login/weixin.png" mode="" @click="friendshare()"></image>
					<text>分享好友</text>
				</view>
				<view class="">
					<image src="../../static/img/login/weixin.png" mode="" @click="shareFriendcricle()"></image>
					<text>分享朋友圈</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	import WarnInfo from "@/components/warnInfo.vue";
	import Blank from "@/components/blank.vue"
	import HandleBtn from "@/components/handleBtn.vue"
	export default {
		components: {
			uniPopup,
			WarnInfo,
			Blank,
			HandleBtn
		},
		data() {
			return {
				hours: '00',
				minutes: '00',
				seconds: '00',
				type:'public',
				recruitId:'',
				warnIcon: require("../../static/img/jobDetail/pin.png"),
				warnTitle: "3人拼单活动.可邀请好友或跟路人进行拼单。3人拼单成功 可获得更多的报酬拼单时间为72小时.倒计时22:18:35",
				employInfo: {
					name: "高级文书顾问/笔译",
					title: "英语翻译",
					distance: "8.6km",
					address: "锦江春熙路",
					price: "4k-10k元/月",
					types: ["交通补贴", "周末双休", "五险一金"],
					avtar: "../../static/img/avartor.png",
					anthor: "2020-6-30 13:30",
				},
				buyList:[{
					img:"../../static/img/avartor.png",
					name:"桥都花花",
					time:"2020-06-03 12:30:28"
				},
				{
					img:"../../static/img/avartor.png",
					name:"桥都花花",
					time:"2020-06-03 12:30:28"
				},
				{
					img:"../../static/img/avartor.png",
					name:"桥都花花",
					time:"2020-06-03 12:30:28"
				}]
			}
		},
		onLoad(option) {
			this.recruitId = option.id;
			this.type = option.type;
			switch (this.type){
				case 'public':
					this.recruitDetail();
					break;
				case 'realtime':
					this.getRealTimeDetail();
					break;
				default:
					break;
			}
		},
		methods: {
			shareBtn(){
				this.$refs.popups.open()
			},
			friendshare(){
				 uni.share({ 
					provider: "weixin",
					scene: "WXSceneSession",
					type: 0,
					href: "http://d.7short.com/su6g",
					title: this.employInfo.title,
					summary: this.employInfo.publishType + '￥'+this.employInfo.salary,                         
					imageUrl: "http:*******************",
					success: function(res) {
							console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//朋友圈
			shareFriendcricle() {
				uni.share({
					provider: "weixin",
					scene: "WXSenceTimeline",
					type: 0,
					href: "http://d.7short.com/su6g",
					title: this.employInfo.title,
					summary: this.employInfo.publishType + '￥'+this.employInfo.salary,                         
					imageUrl: "http:*******************",
					success: function(res) {
							console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//获取实时用工详情
			getRealTimeDetail(){//获取实时用工详情
				let _this = this
				this.$utils.requert({ url: 'timeOrderDetail', data: { orderId: this.recruitId }, type: 'post' }).then(res => {
					if (res.code === 1) {
						// this.$utils.showLayer(res.message)
						this.employInfo = res.data;
						this.employInfo.positionLabel = this.employInfo.positionLabel.split(',')
						this.employInfo.difference = this.employInfo.groupNumber - this.employInfo.groupData.length
					} else {
						this.$utils.showLayer(res.message);
					}
				});
			},
			//详情获取
			recruitDetail() {
				let _this = this
				this.$utils.requert({ url: 'recruitDetail', data: { recruitId: this.recruitId }, type: 'post' }).then(res => {
					if (res.code === 1) {
						this.employInfo = res.data;
						this.getTime()
				} else {
					this.$utils.showLayer(res.message);
				}
			});
		},
		getTime(){
			let _this = this
			var timer = setInterval(()=>{
				let endTime = this.employInfo.groupData[0].endTime
				var s2 = new Date(endTime.replace(/-/g, "/")),
					s1 = new Date(),
					runTime = parseInt((s2.getTime() - s1.getTime()) / 1000);
					if(runTime > 0 ) {
						var year = Math.floor(runTime / 86400 / 365);
						runTime = runTime % (86400 * 365);
						var month = Math.floor(runTime / 86400 / 30);
						runTime = runTime % (86400 * 30);
						var day = Math.floor(runTime / 86400);
						runTime = runTime % 86400;
						var hour = Math.floor(runTime / 3600);
						runTime = runTime % 3600;
						var minute = Math.floor(runTime / 60) > 9 ? Math.floor(runTime / 60) : '0' + Math.floor(runTime / 60);
						runTime = runTime % 60;
						var second = runTime>9?runTime:'0'+runTime;
						 _this.hours = day * 24 + hour
						 _this.minutes = minute
						 _this.seconds = second
					} else{
						 clearInterval(timer)
					}
				
			},1000)
		},
			getRemainderTime (startTime){
				
		// 	 let datas = {
		// 		 hour: day * 24 + hour,
		// 		 minute: minute,
		// 		 second: second
		// 	 }
		// 　　return datas;
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		background-color: #fff;
	}
</style>

<style scoped lang="scss">
	.container {
		width: 100%;

	}

	.pop{
		display: flex;
		background-color: #fff;
	}
	.pop view {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 200rpx;
		justify-content: center;
		font-size: 28rpx;
		width: 100%;
	}
	.pop view image{
		width: 100rpx;
		height: 100rpx;
	}
	.pop view text {
		margin-top: 10rpx;
	}
	.common_container{
		width: 100%;
		background-color: #fffbee;
		padding:36rpx 24rpx;
		font-size: 25rpx;
		color:#FB8408;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		.icon{
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	.employ_part {
		padding: 40rpx 0;
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		box-sizing: border-box;
	}

	.employ_part .name {
		font-size: 31rpx;
		color: #323232;
	}

	.distance_address {
		font-size: 24rpx;
		color: #838282;
		width: 100%;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.employ_part .types {
		display: flex;
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		flex-wrap: wrap;
	}

	.employ_part .types .type_item {
		padding: 0 8rpx;
		border: 1rpx solid #f6f6f6;
		font-size: 25rpx;
		color: #FB8408;
		margin-right: 16rpx;
		margin-bottom: 15rpx;
	}

	.company_person {
		font-size: 24rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.company_person image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 17rpx;
	}

	.right {
		text-align: right;
		flex-shrink: 0;
		width: 20%;
	}
	.left{
		flex: 1;
		width: 20%;
	}

	.right .money {
		font-size: 28rpx;
		color: #FB8408;
	}
	.mid_part{
		text-align: center;
	}
	.mid_part .group_person{
		display: flex;
		margin-bottom: 23rpx;
		justify-content: center;
		margin-top: 40rpx;
	}
	.mid_part .group_person image{
		width: 100rpx;
		height: 100rpx;
		margin-right: 50rpx;
	}
	.mid_part .mini_desc{
		font-size: 28rpx;
		color: #838282;
		margin-bottom: 45rpx;
	}
	.mid_part .extra_time{
		font-size: 28rpx;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}
	.mid_part .extra_time .time{
		color: #FB8408;
		display: flex;
		}
	.mid_part .extra_time .time view{
		width:45rpx;
		height: 45rpx;
		line-height: 45rpx;
		text-align: center;
		background-color:#FB8408;
		background: rgba(251,132,8,0.18);
		margin-right: 20rpx;
		margin-left: 20rpx;
		border-radius: 7rpx;
	}
	.buy_list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:27rpx 0;
	    margin:0 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F6F6F6;
		
		}
		.buy_list image{
			width:70rpx;
			height: 70rpx;
			margin-right: 12rpx;
		}
		
	.buy_list:last-child{
		border:none;
	}
	.buy_list .img_part{
		display: flex;
		align-items: center;
	}
	.buy_list .default{
		border-radius: 50%;
	}
	.buy_list .img_part .name{
		font-size: 28rpx;
		color: #333333;
		}
	.buy_list .time{
		font-size: 25rpx;
		color: #838282;
	}
	.bottom_btn{
		margin-top:64rpx;
		margin-bottom: 100rpx;
	}
</style>
